import { Component, OnInit,Output,Host,Inject,forwardRef,EventEmitter } from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
import {DragdropService} from '../../services/dragdrop.service'

@Component({
  selector: 'app-filters',
  templateUrl: './filters.component.html',
  styleUrls: ['./filters.component.css']
})
export class FiltersComponent implements OnInit {

  draggedEl=false;
  helpMessage={
    filter:false,
    column:''
  }
  curWidget={
    config:{
      filters:[],
      selects:[]
    }
  }

  constructor(
    public translate:TranslateService,
    private dragdropservice:DragdropService
  ) { 
    translate.addLangs(['zh','en']);                          //添加语言支持
    translate.setDefaultLang('en');                           //设置默认语言
    let broswerLang = translate.getBrowserLang();              //获取浏览器支持的语言
    console.log(broswerLang)                                   //zh
    translate.use(broswerLang.match(/zh|en/) ? broswerLang : 'en');
  }

  @Output() filters=new EventEmitter<any>()
  ngOnInit() {
  }


  findIndex(el:any) {
    let index = -1;
    for(let i = 0; i < this.curWidget.config.filters.length; i++) {
        if(el.vin === this.curWidget.config.filters[i].vin) {
            index = i;
            break;
        }
    }
    return index;
  }
  filterdrop(el){
    let t=this.dragdropservice.filtergetdrag()
    console.log(t)
    this.curWidget.config.filters = [...this.curWidget.config.filters,t.a._events[0]];
    let draggedCarIndex = this.findIndex(t.a._events[0]);
    t.b._events[0] = t.b._events[0].filter((val,i) => i!=draggedCarIndex);
    t.a._events[0]= null;
    this.filters.emit(this.curWidget.config.filters)
  }

  emitgroup(o){
    this.dragdropservice.filterEl.emit(o)
  }


  editFilterGroup (col) {
    // var columnObjs = schemaToSelect(this.schema);
    // $uibModal.open({
    //     templateUrl: 'org/cboard/view/config/modal/filterGroup.html',
    //     windowTemplateUrl: 'org/cboard/view/util/modal/window.html',
    //     backdrop: false,
    //     scope: $scope,
    //     controller: function ($scope, $uibModalInstance) {
    //         if (col) {
    //             $scope.data = angular.copy(col);
    //         } else {
    //             $scope.data = {group: '', filters: []};
    //         }
    //         $scope.columnObjs = columnObjs;
    //         $scope.close = function () {
    //             $uibModalInstance.close();
    //         };
    //         $scope.addColumn = function (str) {
    //             $scope.data.filters.push({col: str, type: '=', values: []})
    //         };
    //         $scope.ok = function () {
    //             if (col) {
    //                 col.group = $scope.data.group;
    //                 col.filters = $scope.data.filters;
    //             } else {
    //                 $scope.curWidget.filterGroups.push($scope.data);
    //             }
    //             $uibModalInstance.close();
    //         };
    //         $scope.editFilter = function (filter) {
    //             $uibModal.open({
    //                 templateUrl: 'org/cboard/view/dashboard/modal/param.html',
    //                 windowTemplateUrl: 'org/cboard/view/util/modal/window.html',
    //                 backdrop: false,
    //                 size: 'lg',
    //                 resolve: {
    //                     param: function () {
    //                         return angular.copy(filter);
    //                     },
    //                     filter: function () {
    //                         return false;
    //                     },
    //                     getSelects: function () {
    //                         return function (byFilter, column, callback) {
    //                             dataService.getDimensionValues($scope.datasource ? $scope.datasource.id : null, $scope.curWidget.query, $scope.curWidget.datasetId, column, undefined, function (filtered) {
    //                                 callback(filtered);
    //                             });
    //                         };
    //                     },
    //                     ok: function () {
    //                         return function (param) {
    //                             filter.type = param.type;
    //                             filter.values = param.values;
    //                         }
    //                     }
    //                 },
    //                 controller: 'paramSelector'
    //             });
    //         };
    //     }
    // });
  };

}
